---
import Layout from '../layouts/Layout.astro';
import FeatureCard from '../components/FeatureCard.astro';
import responsiveIcon from '../assets/astro.svg';
import HeroCard from '../components/HeroCard.astro';
import ContentCard from '../components/ContentCard.astro';
import BottomCard from '../components/BottomCard.astro';
---
<Layout title="Home">
    <!-- 顶部大标题卡片 -->
     <Fragment slot="main">
    <HeroCard></HeroCard>
    <!-- 下面所有内容都在一个大卡片 -->
    <ContentCard
      <!--介绍区域 -->
      <div class="introduce">
        <h2>🌟 Ice Blog </h2>
        <p>A minimal, responsive, and feature-rich Astro blog theme designed for creators who value beautiful content presentation and exceptional performance.</p>
      </div>
        <!-- Features 区域 -->
      <div class="features-section">
        <h2>✨Features</h2>
        <div class="features">
         <FeatureCard
          title="Responsive Design" 
          description="Fully responsive design that looks great on all devices from mobile to desktop"
          iconSrc={responsiveIcon}
         />
         <FeatureCard
          title="Responsive Design" 
          description="Fully responsive design that looks great on all devices from mobile to desktop"
          iconSrc={responsiveIcon}
         />
         <FeatureCard
          title="Responsive Design" 
          description="Fully responsive design that looks great on all devices from mobile to desktop"
          iconSrc={responsiveIcon}
         />
         <FeatureCard
         title="Responsive Design" 
         description="Fully responsive design that looks great on all devices from mobile to desktop"
         iconSrc={responsiveIcon}
        />
        <FeatureCard
        title="Responsive Design" 
        description="Fully responsive design that looks great on all devices from mobile to desktop"
        iconSrc={responsiveIcon}
       />
       <FeatureCard
       title="Responsive Design" 
       description="Fully responsive design that looks great on all devices from mobile to desktop"
       iconSrc={responsiveIcon}
      />
          </div>
          <!-- 更多功能... -->
        </div>
      </div>
      <!-- Quick Start 区域 -->
      <h2 class="quickstart-title">
        <span class="quickstart-icon">🚀</span>
        Quick Start
      </h2>
      <div class="quickstart-card">
        <div class="quickstart-steps">
          <h3>Get started in three simple steps:</h3>
          <ol>
            <li>
              <div class="step-header">
                <span class="step-num">1</span>
                <span class="step-title">Clone the repository</span>
              </div>
              <div class="step-desc">Use Git to clone the Frosti repository to your local machine:</div>
              <pre class="step-code"><code>git clone --depth 1 https://github.com/EveSunMaple/Frosti.git Frosti</code></pre>
            </li>
            <li>
              <div class="step-header">
                <span class="step-num">2</span>
                <span class="step-title">Install dependencies</span>
              </div>
              <div class="step-desc">Navigate to the project directory and install dependencies:</div>
              <pre class="step-code"><code>cd Frosti && npm install</code></pre>
            </li>
            <li>
              <div class="step-header">
                <span class="step-num">3</span>
                <span class="step-title">Start the development server</span>
              </div>
              <div class="step-desc">Launch the local development server to see your blog:</div>
              <pre class="step-code"><code>npm run build && npm run dev</code></pre>
              <div class="step-desc">Open your browser and navigate to <code class="inline-code">http://localhost:4321</code> to see your blog in action!</div>
            </li>
          </ol>
          <div class="quickstart-tip">
            <span class="tip-icon">💡</span>
            Check out the <a href="/blog" class="tip-link">blog section</a> for detailed guides and documentation.
          </div>
        </div>
      </div>
    </Fragment>
    <Fragment slot="footer">
      <BottomCard></BottomCard>
    </Fragment>
    />
 
  <style>
    .features-section {
      margin-bottom: 40px;
    }
    .features {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      margin-top: 18px;
    }
  .quickstart-card {
  background: #f4f8ff;
  border-radius: 18px;
  padding: 36px 32px 28px 32px;
  margin: 32px 0;
  box-shadow: 0 2px 16px 0 rgba(0,0,0,0.06);
  max-width: 800px;
}
.quickstart-title {
  display: flex;
  align-items: center;
  font-size: 2rem;
  font-weight: bold;
  color: #1a1a1a;
  margin-bottom: 18px;
}
.quickstart-icon {
  font-size: 2rem;
  margin-right: 10px;
}
.quickstart-steps h3 {
  font-size: 1.2rem;
  font-weight: bold;
  margin-top: 1px;
  color: #222;
}
.quickstart-steps ol {
  list-style: none;
  padding: 0;
  margin: 0 0 18px 0;
}
.quickstart-steps li {
  margin-bottom: 28px;
}
.step-header {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}
.step-num {
  width: 32px;
  height: 32px;
  background: #2563eb;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.15rem;
  margin-right: 12px;
}
.step-title {
  font-weight: bold;
  font-size: 1.1rem;
  color: #1a1a1a;
}
.step-desc {
  color: #444;
  font-size: 1rem;
  margin: 6px 0 8px 44px;
}
.step-code {
  background: #0f172a;
  color: #fff;
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 1rem;
  margin: 0 0 0 44px;
  overflow-x: auto;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.08);
}
.inline-code {
  background: #e0e7ef;
  color: #2563eb;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.98em;
}
.quickstart-tip {
  background: #e0edff;
  color: #2563eb;
  border-radius: 10px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  margin-top: 18px;
  font-size: 1rem;
}
.tip-icon {
  font-size: 1.2rem;
  margin-right: 8px;
}
.tip-link {
  color: #2563eb;
  text-decoration: underline;
  margin-left: 4px;
}
@media (max-width: 600px) {
  .quickstart-card { padding: 16px 4px; }
  .step-code { font-size: 0.95rem; padding: 10px 6px; }
}
.introduce h2{
  font-size: 2.5rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, #6d28d9 0%, #a21caf 50%, #f0f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  align-items: center;
  justify-content: center;
}
.introduce p{
  text-align: center;
  font-size: 1.3rem;
  margin-top: 2px;
  color:#4c545f;
}
.card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 16px 0 rgba(0,0,0,0.06);
  padding: 32px 28px;
  margin-bottom: 32px;
}
  </style>
</Layout>